<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle ?: '同步平台'}">同步平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar Navigation -->
            <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" th:href="@{/}">
                                <i class="bi bi-house"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/dashboard}">
                                <i class="bi bi-speedometer2"></i> 仪表盘
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/server}">
                                <i class="bi bi-server"></i> 服务器管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/database}">
                                <i class="bi bi-database"></i> 数据库管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/database}">
                                <i class="bi bi-arrow-left-right"></i> 数据库同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/sync/file}">
                                <i class="bi bi-files"></i> 文件同步
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/restore}">
                                <i class="bi bi-arrow-counterclockwise"></i> 数据库恢复
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" th:href="@{/task/log}">
                                <i class="bi bi-list-check"></i> 同步日志
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <!-- Main Content -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">数据同步平台</h1>
                </div>
                
                <!-- Welcome Message -->
                <div class="jumbotron p-4 bg-light rounded-3">
                    <h1 class="display-5 fw-bold">欢迎使用数据同步平台</h1>
                    <p class="col-md-8 fs-4">这是一个用于数据库和文件同步的平台，您可以轻松地配置和管理同步任务。</p>
                    <hr class="my-4">
                    <p>开始使用请点击下方按钮</p>
                    <a class="btn btn-primary btn-lg" th:href="@{/dashboard}" role="button">开始使用</a>
                </div>
                
                <!-- Features -->
                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-database"></i> 数据库同步</h5>
                                <p class="card-text">支持多种数据库之间的数据同步，可以设置定时任务自动同步。</p>
                                <a th:href="@{/sync/database}" class="btn btn-outline-primary">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-files"></i> 文件同步</h5>
                                <p class="card-text">支持服务器之间的文件同步，可以设置文件过滤和定时同步。</p>
                                <a th:href="@{/sync/file}" class="btn btn-outline-primary">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-arrow-counterclockwise"></i> 数据库恢复</h5>
                                <p class="card-text">支持从备份文件恢复数据库，让您轻松应对数据丢失或故障。</p>
                                <a th:href="@{/restore}" class="btn btn-outline-primary">查看更多</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-list-check"></i> 同步日志</h5>
                                <p class="card-text">记录所有同步任务的执行情况，方便查看和排查问题。</p>
                                <a th:href="@{/task/log}" class="btn btn-outline-primary">查看更多</a>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>
    <script th:src="@{/js/script.js}"></script>
</body>
</html> 